import React, { ChangeEvent, useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import styles from './login.module.scss'
import initLoginBg from './init'
import './login.scss'  // 覆盖UI组件样式
import { Input, Space, Button, message } from 'antd';

import {CaptchaAPI} from '@/request/api'

export default function index() {
    // 初始化
    useEffect(() => {
        initLoginBg()
        getCaptchaImg()
        window.onresize = function () { initLoginBg() }
    }, [])

    // 获取用户输入的信息
    const [usernameVal, setUsernameVal] = useState(""); // 定义用户输入用户名这个变量
    const [passwordVal, setPasswordVal] = useState(""); // 定义用户输入密码这个变量
    const [captchaVal, setCaptchaVal] = useState(""); // 定义用户输入验证码这个变量
    

    const usernameChange = (e: ChangeEvent<HTMLInputElement>) => {
        setUsernameVal(e.target.value)
    }

    const passwordChange = (e: ChangeEvent<HTMLInputElement>) => {
        setPasswordVal(e.target.value);
    }

    // 监听验证码输入框
    const captchaChange = (e: ChangeEvent<HTMLInputElement>) => {
        setCaptchaVal(e.target.value);
    }
    const gotoLogin = () => {
        console.log("用户输入的用户名，密码，验证码分别是：", usernameVal, passwordVal, captchaVal);
        // 验证是否有空值
        if (!usernameVal.trim() || !passwordVal.trim() || !captchaVal.trim()) {
            message.warning("请完整输入信息！")
            return
        }
    }


    // 定义一个变量保存验证码图片信息
    const [captchaImg, setCaptchaImg] = useState("");
    // 验证码点击事件
    const getCaptchaImg =async () => {
        let res = await CaptchaAPI()
        console.log('验证码点击事件',res);
        setCaptchaImg(`data:image/${res.fullName};base64,${res.data}`)        
    }


    return (
        <div className={styles.loginPage}>
            <canvas id="canvas" style={{ display: "block" }}></canvas>
            {/* 登录盒子 */}
            <div className={styles.loginBox + " loginbox"}>
                {/* 标题部分 */}
                <div className={styles.title}>
                    <h1>前端乐哥&nbsp;·&nbsp;通用后台系统</h1>
                    <p>Strive Everyday</p>
                </div>
                {/* 表单部分 */}
                <div className="form">
                    {/* <Input placeholder="Basic usage" /> */}
                    <Space direction="vertical" size="large" style={{ display: 'flex' }}>
                        <Input placeholder="用户名" onChange={usernameChange} />
                        <Input.Password placeholder="密码" onChange={passwordChange} />
                        {/* 验证码盒子 */}
                        <div className="captchaBox">
                            <Input placeholder="验证码" onChange={captchaChange} />
                            <div className="captchaImg" onClick={getCaptchaImg}>
                                <img height="38" src={captchaImg} alt="" />
                                {/* <img height="38" src="/src/assets/image/bg.jpg" alt="" /> */}
                            </div>
                        </div>


                        <Button type="primary" className="loginBtn" block onClick={gotoLogin}>登录</Button>
                    </Space>
                </div>
            </div>

        </div>
    )
}
